<template>
  <div>
    <h1>宠物列表</h1>
    <div class="pet-category" v-for="category in categories" :key="category.name">
      <h2>{{ category.name }}</h2>
      <div class="pet-list">
        <div
          class="pet-card"
          v-for="pet in category.pets"
          :key="pet.id"
          @click="viewPetDetail(pet.id)"
        >
          <img :src="pet.image" alt="宠物" class="pet-image" />
          <h3>{{ pet.name }}</h3>
          <p>{{ pet.type }}</p>
          <p>{{ pet.description }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      categories: [
        {
          name: '犬类',
          pets: [
            {
              id: 1,
              name: '金毛寻回犬',
              type: '犬',
              description: '聪明友善，适合家庭',
              image: require('../assets/dog11.png'),
            },
            {
              id: 2,
              name: '拉布拉多',
              type: '犬',
              description: '活泼，忠诚，友好',
           image: require('../assets/dog11.png'),
            },
              {
              id: 3,
              name: '金毛寻回犬',
              type: '犬',
              description: '聪明友善，适合家庭',
             image: require('../assets/dog11.png'),
            },
            {
              id: 4,
              name: '拉布拉多',
              type: '犬',
              description: '活泼，忠诚，友好',
            image: require('../assets/dog11.png'),
            },
              {
              id: 5,
              name: '金毛寻回犬',
              type: '犬',
              description: '聪明友善，适合家庭',
            image: require('../assets/dog11.png'),
            },
            {
              id: 6,
              name: '拉布拉多',
              type: '犬',
              description: '活泼，忠诚，友好',
             image: require('../assets/dog11.png'),
            }
          ],
        },
        {
          name: '猫类',
          pets: [
            {
              id: 3,
              name: '英国短毛猫',
              type: '猫',
              description: '性格温和，可爱',
               image: require('../assets/mao.png'),
            },
            {
              id: 4,
              name: '波斯猫',
              type: '猫',
              description: '毛发绒密，喜欢安静',
              image: require('../assets/mao.png'),
            },
             {
              id: 5,
              name: '英国短毛猫',
              type: '猫',
              description: '性格温和，可爱',
               image: require('../assets/mao.png'),
            },
            {
              id: 6,
              name: '波斯猫',
              type: '猫',
              description: '毛发绒密，喜欢安静',
              image: require('../assets/mao.png'),
            },
          ],
        },
      ],
    };
  },
  methods: {
    viewPetDetail(petId) {
        console.log(this.categories);
      this.$router.push(`/pet/${petId}`);
    },
  },
};
</script>

<style>
.pet-category {
  margin-bottom: 30px;
}
.pet-list {
  display: flex;
  flex-wrap: wrap;
}
.pet-card {
  border: 1px solid #ccc;
  border-radius: 8px;
  margin: 15px;
  padding: 15px;
  cursor: pointer;
  text-align: center;
  width: 200px;
}
.pet-image {
  width: 100%;
  height: auto;
  border-radius: 5px;
}
</style>